<template>
	<uv-row customStyle="flex-wrap: wrap" v-if="list.length">
		<uv-col :span="12" v-for="(e,i) in list" :key="i">
			<uv-gap height="10" bgColor="transparent" />
			<view class="card">
				<view class="info">
					<view class="flex">
						<uv-avatar :src="e.avatar || getIconPath('avatar.png')" size="30"/>
						<view class="ml20">
							<text class="nickname">{{e.nickname}}</text>
							<text class="time">{{e.create_time}} 评价</text>
						</view>
					</view>
					<uv-icon name="more-dot-fill" size="16" @click="showActionSheet(e.id)"/>
				</view>
				<text class="content">{{e.content}}</text>
				<view class="preview-list">
				  <view v-if="e.video" class="preview-item">
				    <video
				      :src="e.video"
				      class="preview-video"
				  					  @click="previewVideo(e.video)"
				    />
				  </view>	
				  <view v-for="(item, index) in e.image" :key="index" class="preview-item">
				    <!-- 图片预览 -->
				    <image
				      :src="item"
				      mode="aspectFill"
				      class="preview-image"
					  @click="previewImage(index, e.image)"
				    />
				  </view>
				</view>
				<view class="pingfeng">
					<text class="tag">综合评分：{{e.star_rating}} 星 </text>
					<text class="tag" v-if="e.spec_values"> | {{e.spec_values}}</text>
				</view>
				<view class="product">
					<uv-icon :name="e.product_image" size="40"/>
					<view class="title">{{e.product_name}}</view>
				</view>
				<uv-gap height="10" bgColor="transparent" />
			</view>
		</uv-col>
	</uv-row>
	<uv-action-sheet ref="actionSheet" :actions="sheets" @select="select" cancelText="取消">
	</uv-action-sheet>
</template>

<script setup>
	import { ref } from 'vue'
	import {
		getIconPath
	} from '@/util'
	import {
		delEvaluated,
		setAnonymous
	} from '@/api'
	defineProps({
		list: {
			type: Array,
			default: () => []
		}
	})
	const emit = defineEmits(['btnRefresh'])
	const actionSheet = ref(null)
	const comment_id = ref(0)
	const sheets = ref([
		{ name: '删除评价' },
		{ name: '设为匿名评价' },
	])
	const previewImage = (index, images) => {
	  uni.previewImage({
	    current: index,          // 当前点击的图片索引
	    urls: images,            // 所有图片 URL 数组
	    indicator: 'number',     // 显示指示器（可选）
	    loop: false              // 是否循环（可选）
	  });
	};
	const previewVideo = (videoUrl) => {
	  uni.navigateTo({
	    url: `/pages-home/market/videoPlayer?videoUrl=${encodeURIComponent(videoUrl)}`
	  });
	};
	const showActionSheet = (id) => {
		actionSheet.value.open()
		comment_id.value = id
	}
	const select = (e) => {
		console.log(e)
		if(e.name == '删除评价') {
			uni.showModal({
				title: '提示',
				content: '确定要删除所选评价吗？',
				success: function(res) {
					if (res.confirm) {
						delEvaluated(comment_id.value).then(res => {
							if (res.code == 200) {
								emit('btnRefresh', 1)
								uni.$uv.toast('删除成功')
							} else {
								uni.$uv.toast(res.msg)
							}
						})
					}
				}
			});				
		} else if(e.name == '设为匿名评价') {
			setAnonymous({id:comment_id.value}).then(res=>{
				if (res.code == 200) {
						uni.$uv.toast('设置匿名评价成功')
						emit('btnRefresh', 1)
					} else {
						uni.$uv.toast(res.msg)
					}
			})
		}
		actionSheet.value.close()
	}
</script>

<style lang="scss" scoped>
	.card {
		padding: 10upx 20upx;
		background-color: #fff;
	}
	.info {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20upx 0;
		.nickname{
			font-size: 24upx;
			color: #333;
		}
		.time{
			font-size:18upx;
			color: #979797;
		}
	}
	.ml20 {
		margin-left: 20upx;
		display: flex;
		flex-direction: column;
	}
	.preview-list {
	  display: flex;
	  flex-wrap: wrap;
	  gap: 10px;
	  margin-top: 10px;
	}
	
	.preview-item {
	  position: relative;
	  width: 120upx;
	  height: 120upx;
	  overflow: hidden;
	}
	
	.preview-image, .preview-video {
	  width: 100%;
	  height: 100%;
	  object-fit: cover;
	}
	
	.content {
		color: #333;
		font-size: 24upx;
	}
	
	/* 视频增加播放图标提示 */
	.preview-video {
	  position: relative;
	}
	.preview-video::after {
	  content: '▶';
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	  color: white;
	  font-size: 24px;
	  background: rgba(0, 0, 0, 0.5);
	  border-radius: 50%;
	  width: 40px;
	  height: 40px;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	}
	
	.pingfeng {
		display: flex;
		margin: 20upx 0;
	}
	
	.product {
		display: flex;
		align-items: center;
		background-color: #f5f5f5;
		.title{
			font-size: 24upx;
			color: #333;
			margin-left: 20upx;
			flex: 1;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
	.tag{
		color: #979797;
		font-size: 24upx;
		margin-right: 6upx;
	}
</style>